<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>搜索</title>
</head>

<body>
    <div class="container">
        <div class="head_guide">
            <div class="header_img">
                <img src="./Images/back.png">
            </div>
            <div class="guide_head_search">
                <input type="search" class="guide_search">
                <img class="guide_head_search_img" src="./Images/search.png">
            </div>
        </div>
        <div class="occupation"></div>
        <div class="main_r_scroll">
            <ul>
                <li><div>Xiaomi MIX系列</div></li>
                <li><div>Xiaomi Civi</div></li>
                <li><div>Xiaomi 手机配置</div></li>
                <li><div>Xiaomi 小米精选</div></li>
                <li><div>Xiaomi 小米有品</div></li>
                <li><div>Xiaomi 数字系列</div></li>
            </ul>
        </div>
        <div class="title">
           你的搜索
        </div>
        <div class="introduce">
            <div class="introduce_box">
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660187405.88555521.jpg">
                    <div class="introduce_box_in_first">
                      
                        Xiaomi MIX Fold 2
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        超轻薄折叠机身设计，小米自研微水滴形态转轴
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥8999
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632824968.20185994.png">
                    <div class="introduce_box_in_first">
                      
                        Xiaomi真无线降噪耳机3
                                            
                    </div>
                    <div class="introduce_box_in_second">
                        40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥319
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640677355.02633044.png">
                    <div class="introduce_box_in_first">
                        XIAOMI Wwtch Color 2
                    </div>
                    <div class="introduce_box_in_second">
                       时刻出色，要你好看
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥2000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1656916095.89126677.png">
                    <div class="introduce_box_in_first">
                       
                        Xiaomi 12S Ultra
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        这真徕卡｜专业徕卡影像
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥4599
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640768539.98629966.jpg">
                    <div class="introduce_box_in_first">
                       小米平板 5 Pro 
                    </div>
                    <div class="introduce_box_in_second">
                       大屏效率新体验
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥3000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1609158754.96998301.jpg">
                    <div class="introduce_box_in_first">
                       
                        Redmi K50 至尊版
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        骁龙8+ ｜1.5K 高清直屏
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥2999
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1595400896.08014623.jpg">
                    <div class="introduce_box_in_first">
                        黑鲨5 Pro 8GB+256GB
                    </div>
                    <div class="introduce_box_in_second">
                       游戏手机
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥3499
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634108394.13125707.jpg">
                    <div class="introduce_box_in_first">
                        Redmi Note 11 Pro
                    </div>
                    <div class="introduce_box_in_second">
                        5160m Ah 超大电池
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥5000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                    <div class="introduce_box_in_first">
                        Redmi Note 11 Pro
                    </div>
                    <div class="introduce_box_in_second">
                        5160m Ah 超大电池
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥5000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660187405.88555521.jpg">
                    <div class="introduce_box_in_first">
                      
                        Xiaomi MIX Fold 2
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        超轻薄折叠机身设计，小米自研微水滴形态转轴
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥8999
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1632824968.20185994.png">
                    <div class="introduce_box_in_first">
                      
                        Xiaomi真无线降噪耳机3
                                            
                    </div>
                    <div class="introduce_box_in_second">
                        40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥319
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640677355.02633044.png">
                    <div class="introduce_box_in_first">
                        XIAOMI Wwtch Color 2
                    </div>
                    <div class="introduce_box_in_second">
                       时刻出色，要你好看
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥2000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1656916095.89126677.png">
                    <div class="introduce_box_in_first">
                       
                        Xiaomi 12S Ultra
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        这真徕卡｜专业徕卡影像
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥4599
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640768539.98629966.jpg">
                    <div class="introduce_box_in_first">
                       小米平板 5 Pro 
                    </div>
                    <div class="introduce_box_in_second">
                       大屏效率新体验
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥3000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1609158754.96998301.jpg">
                    <div class="introduce_box_in_first">
                       
                        Redmi K50 至尊版
                                    
                    </div>
                    <div class="introduce_box_in_second">
                        骁龙8+ ｜1.5K 高清直屏
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥2999
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1595400896.08014623.jpg">
                    <div class="introduce_box_in_first">
                        黑鲨5 Pro 8GB+256GB
                    </div>
                    <div class="introduce_box_in_second">
                       游戏手机
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥3499
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1634108394.13125707.jpg">
                    <div class="introduce_box_in_first">
                        Redmi Note 11 Pro
                    </div>
                    <div class="introduce_box_in_second">
                        5160m Ah 超大电池
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥5000
                    </div>
                </div>
                <div class="introduce_box_in">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                    <div class="introduce_box_in_first">
                        Redmi Note 11 Pro
                    </div>
                    <div class="introduce_box_in_second">
                        5160m Ah 超大电池
                    </div>
                    <div class="introduce_box_in_thrid">
                        ￥5000
                    </div>
                </div>
            </div>
        </div>

</body>
<!-- <link rel="stylesheet" href="./css/Search.css"> -->
<script>
        var startX = 0;
    var check=0
    var ulFather = document.querySelector('.main_r_scroll')
    var ul = ulFather.querySelector('ul')
    ul.addEventListener('touchstart', function (e) {
        e.preventDefault()
        startX = e.targetTouches[0].pageX
    })
    ul.addEventListener('touchmove', function (e) {
        e.preventDefault()
        moveX = e.targetTouches[0].pageX
         check = startX - moveX
        // console.log(check)
        if(Number(check)>1000){
            // console.log('进入了')
            // ul.style.transform = 'translateX(' + check + 'px)'
        }
        ul.style.transform = 'translateX(' + -check + 'px)'
    })
    ul.addEventListener('touchend',function(e){
        e.preventDefault()
        // ul.style.transition='all .5s'
        // ul.style.transform = 'translateX('+check+'px)'
    })
    var backTop=document.querySelector('.header_img')
    backTop.addEventListener('click',function(){
        location.href='./Index.html'
    })
    var search=document.querySelector('.guide_search')
    search.addEventListener('keypress',function(e){
        if(e.keyCode==13){
           location.href='./Search.html'
        }
    })
</script>
</html>